/**
 * Created by lishengyong on 2017/4/14.
 */

import React from 'react';
import Table from './Table'
import { cloneDeep } from 'lodash';
import constant from './constant'

require('./BlueseaTable.scss');

const classes = {
    hightlighted: 's-bs-table__content__tr--hightlighted',
}

const column = [
    {
        key: 'id',
        width: 300,
        fiexed: true,
    },
    {
        key: 'name',
        width: 300,
        fiexed: true,
    },
    {
        key: 'age',
        width: 300,
        fiexed: true,
    },
    {
        key: 'address',
        width: 300,
        fiexed: true,
    }
]

class TableContainer extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            data: [
                {
                    id: 0,
                    name: 'zhangsan',
                    age: 23,
                    address: ''
                },
                {
                    id: 1,
                    name: 'lisi',
                    age: 23,
                    address: ''
                },
                {
                    id: 2,
                    name: 'wangwu',
                    age: 23,
                    address: ''
                }
            ]
        }

        this.onInputChange = this.onInputChange.bind(this)
        this.changeCellEditStatus = this.changeCellEditStatus.bind(this)
    }

    onInputChange(value, rowIndex, columnIndex, key) {
        const data = cloneDeep(this.state.data);
        data[rowIndex][key] = value;
        this.setState({
            data
        });
    }

    changeCellEditStatus(item, rowIndex, column, type) {
        const data = cloneDeep(this.state.data);
        if (type === constant.CELL_EDIT) {
            item.activeColumn = column;
        } else {
            delete item.activeColumn
        }
        data[rowIndex] = item;
        this.setState({
            data
        });
    }

    render() {

        const { data } = this.state;

        return (
            <div>
                <Table
                    data={data}
                    columns={column}
                    onInputChange={this.onInputChange}
                    changeCellEditStatus={this.changeCellEditStatus}
                />
            </div>
        )
    }
}

export default TableContainer;


